<template>
  <div class="windowInfo windowInfo4">
    <!-- <img
      src="../../../../public/hide1.png"
      alt
      @click="hideBox"
      style="width: 20px; position: absolute; right: 10px; top: 10px; z-index: 2; cursor: pointer"
    /> -->
    <div class="logs">
      <h3 style="width:100%;text-align:center">TCP连接状态</h3>
      <a-table size="small" :columns="columns" :data-source="dataSource" :pagination="false" bordered>
        <template slot="status" slot-scope="text">
          <a-icon type="loading" v-if="text == 'STARTING'" />
          <span v-else :class="text == 'ON' ? 'onStyle' : 'offStyle'"></span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapGetters } from 'vuex'
const columns = [
  {
    title: '连接名称',
    align: 'center',
    dataIndex: 'channelName'
  },
  {
    title: '远程IP',
    align: 'center',
    dataIndex: 'channelHost'
  },
  {
    title: '远程端口',
    align: 'center',
    dataIndex: 'channelPort'
  },
  {
    title: '启动状态', //on:启动 off:关闭
    align: 'center',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  }
]

import { getAction } from '@/api/manage'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    }
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        if (msg.cmd == 'WEB_CONSOLE_MESSAGE') {
          this.loadData()
        } else if (msg.cmd === 'HOME_REFRESH') {
          this.getList()
        }
      }
    }
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      columns,
      url: {
        list: '/channel/nmcChannelInfo/list'
      },
      dataSource: []
    }
  },
  methods: {
    getList() {
      console.log('ttttttttttttttt')
      getAction(this.url.list).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style></style>
<style lang="less" scoped>
.onStyle,
.offStyle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}
.onStyle {
  background: rgb(56, 241, 56);
}
.offStyle {
  background: red;
}
</style>
